<template>
  <div>
    <!-- 固定搜索框 并且滚动渐透明-->
    <div>
      <van-sticky class="top">
        <van-search
          v-model="value"
          show-action
          placeholder="大前端"
          shape="round"
          class="page-nav-bar"
        >
          <template #left>
            <div>
              <van-icon
                name="wap-nav"
                size="0.8rem"
                style="margin-right: 10px"
              />
            </div>
          </template>
          <template #action>
            <div>
              <van-icon
                name="chat-o"
                size="0.8rem"
                style="margin-right: 10px"
              />
            </div>
          </template>
        </van-search>
      </van-sticky>
    </div>

    <!-- 轮播图 -->
    <div>
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="image in images" :key="image.id">
          <img :src="image.icon" style="height: 200px" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 活动图片1 -->
    <div>
      <ul class="activity">
        <li v-for="item in moveabout" :key="item.id">
          <img :src="item.icon" alt="" />
        </li>
      </ul>
    </div>

    <!-- 点击跳转到商品列表页面的图片十个超市 -->
    <div>
      <div @click="togoodslist">
        <div class="Circles">
          <div>
            <img
              src="http://imooc.hybrid.lgdsunday.club/img/jingDongChaoShi.ad21df4d.png"
            /><span>京东超市</span>
          </div>
          <div>
            <img
              src="http://imooc.hybrid.lgdsunday.club/img/haiTunQuanQiu.54597de3.png"
            /><span>京东超市</span>
          </div>
          <div>
            <img
              src="http://imooc.hybrid.lgdsunday.club/img/jingDongFuShi.13729a19.png"
            /><span>京东超市</span>
          </div>
          <div>
            <img
              src="http://imooc.hybrid.lgdsunday.club/img/jingDongShengXian.22b8843b.png"
            /><span>京东超市</span>
          </div>
          <div>
            <img
              src="http://imooc.hybrid.lgdsunday.club/img/jingDongDaoJia.d644304a.png"
            /><span>京东超市</span>
          </div>
          <div>
            <img
              src="http://imooc.hybrid.lgdsunday.club/img/chongZhiJiaoFei.2c954f82.png"
            /><span>京东超市</span>
          </div>
          <div>
            <img
              src="http://imooc.hybrid.lgdsunday.club/img/jingDongPinGou.2dad6945.png"
            /><span>京东超市</span>
          </div>
          <div>
            <img
              src="http://imooc.hybrid.lgdsunday.club/img/lingJuan.5ff084a4.png"
            /><span>京东超市</span>
          </div>
          <div>
            <img
              src="http://imooc.hybrid.lgdsunday.club/img/zhuanQian.dbaa12df.png"
            /><span>京东超市</span>
          </div>
          <div>
            <img
              src="http://imooc.hybrid.lgdsunday.club/img/quanBu.34bf33e3.png"
            /><span>京东超市</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 京东秒杀 :title="index"-->
    <div>
      <div class="more">
        <div class="jd-seckill">
          <h5 class="jdms" style="font-size: 15px">京东秒杀</h5>
          <!-- 倒计时 -->
          <p style="display: flex">
            <span style="background-color: red; color: #fff">16点场</span
            ><span
              ><van-count-down
                :time="time"
                size="20"
                style="border: 2px solid red"
                ><span v-if="time <= 0">活动结束</span></van-count-down
              ></span
            >
          </p>
        </div>
        <van-swipe
          :loop="false"
          :width="70"
          class="miaosha"
          style="margin: 18px"
        >
          <van-swipe-item
            v-for="value in seckillList"
            :key="value.id"
            :loop="false"
            :width="70"
            class="miaosha"
            show-indicators="false"
          >
            <div class="image-wrapper">
              <img :src="value.icon" />
              <div class="image-text" style="color: #dd001b">
                ￥{{ value.price }}
              </div>
              <div
                class="image-text"
                style="color: #999; text-decoration: line-through"
              >
                ￥{{ value.oldPrice }}
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <!-- 活动图片2 -->
    <ul class="activity2">
      <li>
        <img
          src="http://imooc.hybrid.lgdsunday.club/img/haoHuoQiang.a976e93f.gif"
          alt=""
        />
      </li>
    </ul>
    <!-- 使用自定义商品列表组件 -->
    <productList></productList>
  </div>
</template>
<script>
// 商品列表组件
import productList from "../goodslist/productList.vue";
// 请求引入
import {
  getCommodityApi,
  getMoveaboutApi,
  getSecondsApi,
  getSwipeApi,
} from "@/api/swipe";
export default {
  components: {
    productList,
  },
  data() {
    return {
      current: 0,
      images: [], //轮播图
      moveabout: [], //活动图片
      Commodity: [], //商品列表
      seckillList: [], //秒杀列表
      value: "",
      time: "", //时间存储
      MM: new Date().getFullYear(),
      YY: new Date().getMonth() + 1,
      DD: new Date().getDate(),
    };
  },
  methods: {
    //时间处理函数
    timeFn() {
      let setID = setInterval(() => {
        // 获取当前时间
        let nowtime = Date.now(); // 获取活动时间
        let xiatime = +new Date(`${this.MM}-${this.YY}-${this.DD} 16:00:00`); // 剩余时间
        const remainder = xiatime - nowtime;
        this.time = remainder;
        if (remainder <= 0) {
          clearInterval(setID);
        }
      }, 1000);
    },
    //顶部渐变淡入淡出
    scroll() {
      const scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 0) {
        this.opacity = Math.abs(Math.round(scrollTop)) / 200;
        document.querySelector(
          ".top"
        ).style.backgroundColor = `rgba(250,240,240,${this.opacity})`;
      } else {
        document.querySelector(".top").style.backgroundColor = "";
      }
    },
    // 去往商品列表传值
    togoodslist() {
      this.$router.push({
        path: "/productList",
        query: {
          listShow: true,
        },
      });
    }, // 当前的商品id
    onChange(index) {
      this.current = index;
    },
  },
  // 一堆请求
  async created() {
    this.timeFn();
    window.addEventListener("scroll", this.scroll);
    try {
      // 轮播图
      let { data } = await getSwipeApi({
        token: "595fe950-7ebd-11ed-aa1f-dd279271aa3a",
      });
      this.images = data.data.list;
      // 活动图
      let res = await getMoveaboutApi({
        token: "595fe950-7ebd-11ed-aa1f-dd279271aa3a",
      });
      this.moveabout = res.data.data.list;
      // 商品列表
      let goods = await getCommodityApi({
        token: "595fe950-7ebd-11ed-aa1f-dd279271aa3a",
      });
      this.Commodity = goods.data.data.list;
      // console.log(goods);

      // 秒杀列表
      let seckill = await getSecondsApi({
        token: "595fe950-7ebd-11ed-aa1f-dd279271aa3a",
      });
      this.seckillList = seckill.data.data.list;
    } catch (error) {
      console.log(error);
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.scroll);
  },
};
</script>

<style scoped lang="less">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}

.seckill li {
  float: left;
  display: inline;
}

.Circles {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;

  div {
    width: 20%;
    color: #333;
    font-size: 26px;
    text-align: center;
    padding-top: 26px;

    span {
      display: block;
    }

    img {
      width: 66%;
    }
  }
}
.activity {
  img {
    float: left;
    width: 33%;
  }
}
.activity2 {
  img {
    // float: left;
    margin: 0 auto;
    width: 100%;
  }
}
// 秒杀列表和倒计时
.miaosha .van-swipe-item {
  margin-right: 20px;
}

.jd-seckill {
  display: flex;
  justify-content: left;
  align-items: center;
  font-size: 16px;
  color: #333;
  margin-top: 20px;
  padding-left: 50px;
  height: 50px;
}

.jd-seckill-title {
  border: solid 5px #c81522;
  border-radius: 14px;
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.jd-seckill-countdown {
  display: flex;
  align-items: center;
}

.jd-seckill-countdown a {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f2f2f2;
  border-radius: 4px;
  margin-right: 5px;
  font-size: 14px;
}

.jd-seckill-countdown .colon {
  font-size: 16px;
  margin-right: 5px;
  margin-left: 5px;
}

.jd-seckill-info {
  display: flex;
  align-items: center;
}

.jd-seckill-info span {
  margin-right: 5px;
}

.jd-seckill-info i {
  font-size: 18px;
  color: #f85959;
}

.image-row {
  display: flex;
  overflow-x: auto;
  margin: 10px 0;
}

.image-grid {
  width: 100%;
  flex-shrink: 0;
}

.image-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-text {
  margin-top: 5px;
  font-size: 12px;
  color: #666;
}

.miaosha {
  padding: 20px;
}
.top {
  position: fixed;
  width: 100%;
  z-index: 1;
}
.page-nav-bar {
  background-color: rgba(255, 255, 255, 0);
}
</style>
